<template>
    <div class="nav-left" ref="customRef">
    
        <a @click="logoClick"class="logo" :alt="siteConf.site_name" style="height: auto !important;" :title="siteConf.site_name">
            <img :src="logoActive == 1 ? siteConf.logo : siteConf.logo2" style="width: 146px; height: 40px;" :alt="siteConf.site_name" :title="siteConf.site_name">
        </a>
        <!-- 头部start -->
        <ul class="left-nav-list">
            <li v-for="(item, index) in navigaionList" :key="index" class="left-nav-item d3-nav-item"
                :class="(index) == isActive ? 'hover-css' : ''" @mouseover="handleMouseEnter(index)"
                @mouseleave="handleMouseLeave()"><a @click="navigaionClick(item)">{{item['title'] }}</a>
                <div class="subnav-model-classification">
                    <classiFication :productList="item['children']" :parentIndex="index" :allList="item" ></classiFication>
                </div>
            </li>
            <li id="more-nav-item" class="left-nav-item more-nav-item" :class="isActiveMore ? 'hover-css' : ''" data-is-buried="1">
                <a class="default-css"  @mouseover="moreMouseEnter()"
                @mouseleave="moreMouseLeave()">更多</a>
                <span class="list-retract-css" @mouseover="moreMouseEnter()"
                @mouseleave="moreMouseLeave()">
                    <el-icon size="24"><Grid /></el-icon>
                </span>
                <div class="subnav-model-classification">
                    <div class="more-left">
                        <div class="cate_channel ">
                            <div class="list-class-left">
                                <ul>
                                    <li>
                                        <a herf="javascript:void(0);">下素材</a>
                                        <a id="more-d3" title="3D模型" href="https://3d.3d66.com/"
                                            target="_blank">3D模型</a>
                                        <a id="more-su" title="SU模型" href="https://su.3d66.com/"
                                            target="_blank">SU模型</a>
                                        <a id="more-tietu" title="贴图" href="https://tietu.3d66.com/"
                                            target="_blank">贴图</a>
                                        <a id="more-material" title="材质" href="https://www.3d66.com/material/_1.html"
                                            target="_blank">材质</a>
                                        <a id="more-cad" title="CAD" href="https://cad.3d66.com/"
                                            target="_blank">CAD</a>
                                        <a id="more-light" title="光域网" href="https://www.3d66.com/light/_1.html"
                                            target="_blank">光域网</a>
                                    </li>
                                    <li>
                                        <a herf="javascript:void(0);">找灵感</a>
                                        <a id="more-linggantu" title="灵感图库" href="https://linggantu.3d66.com/"
                                            target="_blank">灵感图库</a>
                                        <a id="more-anli" title="全球案例" href="https://anli.3d66.com/"
                                            target="_blank">全球案例</a>
                                        <a id="more-xiaoguotu" title="效果图" href="https://xiaoguotu.3d66.com/"
                                            target="_blank">效果图</a>
                                        <a id="more-fanganwenben" title="方案文本" href="https://fanganwenben.3d66.com/"
                                            target="_blank">方案文本</a>

                                    </li>
                                    <li>
                                        <a herf="javascript:void(0);">实用工具</a>
                                        <a id="more-work" title="企业协作" rel="nofollow" href="https://work.3d66.com/"
                                            target="_blank">企业协作</a>
                                        <a id="more-vr" class="list-page-show" title="VR全景" href="https://vr.3d66.com/"
                                            target="_blank">VR全景<div class="vr-free-icon">免费</div></a>
                                        <a id="more-xuanran" title="云渲染" href="https://xuanran.3d66.com/"
                                            target="_blank">云渲染</a>
                                        <a id="more-ai" class="list-page-show" title="溜溜AI" rel="nofollow"
                                            href="https://aico.3d66.com/#/main/channel/1ctNkgDXiGxHVtreuhPu2SC9Lwh/0?ai_source=2"
                                            target="_blank">溜溜AI<span class="new-nav-label-ai">NEW</span></a>
                                        <a id="more-max" title="MAX脚本" rel="nofollow"
                                            href="https://www.3d66.com/maxscript.html" target="_blank">MAX脚本</a>
                                        <a id="more-helper" title="溜溜杀毒助手" rel="nofollow"
                                            href="https://www.3d66.com/ku/helper" target="_blank">溜溜杀毒助手</a>
                                        <a id="more-mss" title="3D魔术手" rel="nofollow"
                                            href="https://mss.3d66.com/download.html" target="_blank">3D魔术手</a>
                                        <a id="more-version" title="模型转版本" rel="nofollow"
                                            href="https://upload_file.3d66.com/change/version" target="_blank">模型转版本</a>
                                        <a id="more-sumax" title="MAX转SU" rel="nofollow"
                                            href="https://upload_file.3d66.com/change/max_to_su/add"
                                            target="_blank">MAX转SU</a>
                                    </li>
                                    <li>
                                        <a herf="javascript:void(0);">溜溜服务</a>
                                        <a id="more-software" title="软件中心" href="https://software.3d66.com/"
                                            target="_blank">软件中心</a>
                                        <a id="more-news" title="资讯与问答" href="https://www.3d66.com/news.html"
                                            target="_blank">资讯与问答</a>
                                        <a id="more-zixue" title="自学课程"
                                            href="https://zixue.3d66.com/course_0_0_all.html" target="_blank">自学课程</a>
                                        <a id="more-mall" title="溜溜商城" rel="nofollow" href="https://mall.3d66.com/"
                                            target="_blank">溜溜商城</a>
                                        <a id="more-notice" title="最新动态" rel="nofollow"
                                            href="https://service.3d66.com/notice.html" target="_blank">最新动态</a>
                                    </li>
                                    <li>
                                        <a>免费素材</a>
                                        <a id="more-free-d3" title="免费3D模型" href="https://3d.3d66.com/model/_1_0_1.html"
                                            target="_blank">免费3D模型</a>
                                        <a id="more-free-su" title="免费SU模型"
                                            href="https://su.3d66.com/sketchup/_1_0_1.html" target="_blank">免费SU模型</a>
                                        <a id="more-free-tietu" title="免费贴图"
                                            href="https://tietu.3d66.com/tietu/_1_0_1.html" target="_blank">免费贴图</a>
                                        <a id="more-free-material" title="免费材质"
                                            href="https://www.3d66.com/material/_1_0_1.html" target="_blank">免费材质</a>
                                        <a id="more-free-cad" title="免费CAD"
                                            href="https://cad.3d66.com/cad/_1_3900_1.html" target="_blank">免费CAD</a>
                                    </li>
                                </ul>
                            </div>

                        </div>
                    </div>
                    <div class="more-right" style="background-color: #ffffff !important">
                        <div class="title">3D溜溜小程序</div>
                        <div class="qrcode-img"></div>
                        <div class="desc">您的口袋模型灵感库</div>
                    </div>
                </div>
            </li>
        </ul>
        <!-- 头部end -->
    </div>
    <!-- 吸顶搜索start -->
    <div class="nav-search-content js-new-search-box">
        <div class="nav-search-input js-new-search-input"> <span class="select-class">{{checkMenu.title}}
            </span><input data-type="1" autocomplete="off" value="" class="search-keyword js-nav-search" type="text"
                placeholder="搜索ID、关键词1"> <label for="newNavUploaderInput" class="search_image_search"
                style="display: inline;"> </label>
            <el-icon class="icon del_key_display">
                <Search />
            </el-icon>
        </div>
        <div class="newnav-related-search js-new-related-search">
            <div class="line"></div>
            <div class="hover-line"></div>
            <div class="search-title">
                <span data-id="1" class="active">3D模型1</span>
            </div>
            <div class="close-icon js-nav-search-close">
                <el-icon>
                    <Close />
                </el-icon>
            </div>

            <div class="newhead-related-search">

                <div class="item-related-search search-related-kyeword" style="display: block;">
                    <p class="related-title">
                        热门搜索
                        <svg class="icon icon_search_hot" aria-hidden="true">
                            <use xlink:href="#icon-search_pop_icon_hot"></use>
                        </svg>
                    </p>
                    <div class="related-search-class clearfix">
                        <a v-for="(v, i) in hotSearchList" :key="i" href="#" class="js_hot_keyword">{{ v['title'] }}</a>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- 吸顶搜索end -->
    <!-- 头部右侧充值，登录--->
    <ul class="nav-right">
        <li id="recharge-nav-item" class="right-nav-item recharge-nav-item"> <a
                href="https://user.3d66.com/recharge/new_charge?e=1" target="_blank" rel="nofollow"><el-icon :size="15">
                    <Coin />
                </el-icon><span>充值</span></a>
            <div class="subnav-warp subnav-recharge-warp"> <a rel="nofollow" class="recharge-item"
                    href="https://user.3d66.com/recharge/new_charge?e=12" target="_blank">下载币充值 <i
                        class="icon-2021-79"></i></a>
            </div>
        </li>
        <li id="vip-nav-item" class="right-nav-item vip-nav-item js_RightNewvipBox">
            <a target="_blank" @click="openVipClick" rel="nofollow"><el-icon :size="15">
                    <Coin />
                </el-icon><span>VIP</span>
            </a>
            <div class="subnav-warp subnav-vip-content" style="display: block;">
                <div class="vip-name">您的超级VIP已过期</div>
                <div class="vip-info">专区免费下、渲染7折等40项特权已离你而去</div>
                <div class="vip-infoClass">
                    <div class="title">VIP尊享素材/渲染/自学贵族多项特权</div>
                    <div class="subnav-vip-weight "> <a class="goto-open" buried-info="4-29" data-vip_type="1"
                            data-click_area="1" data-type="47" data-entrance="2"><i></i>
                            <p>VIP模型免费下</p>
                        </a> <a class="goto-open" buried-info="4-29" data-vip_type="1" data-click_area="1"
                            data-type="47" data-entrance="2"><i></i>
                            <p>VIP素材免费下</p>
                        </a> <a class="goto-open" buried-info="4-29" data-vip_type="1" data-click_area="1"
                            data-type="47" data-entrance="2"> <i class="icon-weight9"></i>
                            <p>模型下载折扣</p>
                        </a> <a class="goto-open" data-vip_type="1" data-click_area="1" data-type="47"
                            data-entrance="2"><i></i>
                            <p>云渲染低至7折</p>
                        </a> <a class="goto-open" data-vip_type="1" data-click_area="1" data-type="47"
                            data-entrance="2"><i></i>
                            <p>专区课程免费看</p>
                        </a> <a class="goto-open" data-vip_type="1" data-click_area="1" data-type="47"
                            data-entrance="2"><i></i>
                            <p>每月会员礼包</p>
                        </a></div> <a href="https://vip.3d66.com/signed.html?e=1#vipPrivilege" class="vip-gift-pack"
                        rel="nofollow"> <span class="">快速领取</span> </a>
                    <div class="subnav-vip-operation"> <a href="https://vip.3d66.com/privilege.html#privilege"
                            class="href-vip-privilege" rel="nofollow">更多特权 <i></i></a> </div>
                    <div class="vip-info-tip">VIP专享附加权益：模型重复下载 永久免费</div>
                </div> <a class="vip-operation goto-open" data-vip_type="1" data-click_area="1" data-type="47"
                    data-entrance="2">立即续费 <div class="tip">一年最多省1598元</div> </a>
            </div>
        </li>
        <!--未登录后的 -->
        <li v-if="!userInfo.isLogin()" id="login-nav-item" class="right-nav-item login-nav-item js_user_login"
            style="display: list-item;">
            <span class="user-login-icon" @click="loginClick">登录/注册</span>
            <div class="subnav-warp subnav-login-warp">
                <div class="not-login-content">
                    <div class="not-login-hd" @click="loginClick">
                        <img src="https://static.3d66.com/public/images/common/defaultHead.jpg" alt="">
                        <div class="hd-text"><span>登录/注册</span> 登录后您将获得：</div>
                    </div>
                    <ul class="not-login-bd">
                        <li class="bd-item">
                            <div class="item-icon"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-nav_login-recommen"></use>
                                </svg></div>
                            <div class="item-info">
                                <div class="title">精准推荐</div>
                                <div class="desc">精准优质的内容推荐</div>
                            </div>
                        </li>
                        <li class="bd-item">
                            <div class="item-icon"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-nav_login_cash"></use>
                                </svg></div>
                            <div class="item-info">
                                <div class="title">现金分成</div>
                                <div class="desc">上传模型享5:5现金分成</div>
                            </div>
                        </li>
                        <li class="bd-item">
                            <div class="item-icon"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-nav_login_equipment"></use>
                                </svg></div>
                            <div class="item-info">
                                <div class="title">多端同步</div>
                                <div class="desc">收藏内容，多端同步查看</div>
                            </div>
                        </li>
                        <li class="bd-item">
                            <div class="item-icon"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-nav_login_720free"></use>
                                </svg></div>
                            <div class="item-info">
                                <div class="title">免费合成</div>
                                <div class="desc">免费合成720全景作品</div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </li>
        <!--登录后的 -->
        <li v-if="userInfo.isLogin()" id="login-nav-item" class="right-nav-item login-nav-item js_user_login"
            style="display: list-item;">
            <a rel="nofollow" @click="userInfoClick('/user/home')">
                <img class="user-img" :src="userInfo.avatar"
                    onerror="javascript:this.src='https://static.3d66.com/public/images/common/defaultHead.jpg'">
                <!-- <span class="message-num">2</span> -->
            </a>
            <div class="subnav-warp subnav-login-warp">
                <div class="top-warp-contnet bg_generally">
                    <div class="vip-icon"></div>
                    <div class="user-info">
                        <div class="user-info-headerimg clearfix">
                            <a rel="nofollow" href="#" class="user-portrait ">
                                <img :src="userInfo.avatar"
                                    onerror="javascript:this.src='https://static.3d66.com/public/images/common/defaultHead.jpg'">

                            </a>
                            <div class="personal-information">
                                <h3 class="name-personal">{{ userInfo.username }}</h3>
                                <p class="user-id">ID:<span class="user-id">{{ userInfo.label_id }}</span></p>
                                <div style="color: #5c5c5c; font-size: 12px;">会员到期时间2023-1-1至2024-1-1</div>
                            </div>
                        </div>
                        <div class="to-vip">
                            <div class="left-ext">开通VIP可畅享更多特权</div>
                            <a rel="nofollow" class="right-btn" href="https://vip.3d66.com/index.html?e=1"
                                target="_blank">开通</a>
                        </div>

                    </div>
                    <div class="common-functions">

                        <div class="link-user-administration">
                            <a rel="nofollow" @click="userInfoClick('/user/home')">
                                <span>个人中心</span>
                                <i class="icon-arrow">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-direction_single_arrow_light_s"></use>
                                    </svg>
                                </i>
                            </a>
                            <a rel="nofollow" @click="userInfoClick('/user/collect')">
                                <span>我的收藏</span>
                                <i class="icon-arrow">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-direction_single_arrow_light_s"></use>
                                    </svg>
                                </i>
                            </a>

                            <a rel="nofollow" @click="userInfoClick('/user/footprint')">
                                <span>浏览足迹</span>
                                <i class="icon-arrow">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-direction_single_arrow_light_s"></use>
                                    </svg>
                                </i>
                            </a>
                            <a rel="nofollow" @click="userInfoClick('/user/recharge')">
                                <span>订单管理</span>
                                <i class="icon-arrow">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-direction_single_arrow_light_s"></use>
                                    </svg>
                                </i>
                            </a>

                            <a rel="nofollow" @click="userInfoClick('/user/pwd')">
                                <span>账号设置</span>
                                <i class="icon-arrow">
                                    <svg class="icon" aria-hidden="true">
                                        <use xlink:href="#icon-direction_single_arrow_light_s"></use>
                                    </svg>
                                </i>
                            </a>

                        </div>
                        <div class="user-log-out" @click="outLogin">退出登录</div>
                    </div>
                </div>
            </div>
        </li>
    </ul>
</template>
<script lang="ts" setup>
import { ref, defineExpose, defineProps, reactive, onMounted } from 'vue'
import { useUserInfo } from '../stores/userInfo'
import { doLogout } from '../api/home/index'
import { Local } from '../utils/storage'
import router from '../router'
import classiFication from '../components/classiFication.vue';
import eventBus from '../utils/event-bus';
import { useSiteConfig } from '../stores/siteConfig'
import { useNavConfig } from '../stores/navConfig'
defineProps(['logoActive', 'hotSearchList']);
import {
    webSiteConfig, getNavigaion
} from "../api/home/index";
const userInfo = useUserInfo() //获取用户信息
const siteConf = useSiteConfig()
const navConfig = useNavConfig()
const checkMenu:any = navConfig.click_menu

const isActive = ref(-1);
const isActiveMore = ref(false);
//导航栏触发特效
const handleMouseEnter = (i: any) => {
    isActive.value = i

};
const handleMouseLeave = () => {
    isActive.value = -1
};

const moreMouseEnter = () => {
    isActiveMore.value = true

};
const moreMouseLeave = () => {
    isActiveMore.value = false
};


//获取div层的属性
const customRef = ref<HTMLElement | null>(null);
const customFun = () => {
    if (customRef.value) {
        const customData = customRef.value.getAttribute('data-custom');
        return customData
    }
}

//登录弹窗
const loginClick = () => {
    eventBus.emit('customEvent', {
        dis: true
    })

}
//开通vip 弹窗
const openVipClick = () => {
    eventBus.emit('openVipCustomEvent', {
        dis: true
    })
}

//退出登录
const outLogin = () => {
    doLogout({ refreshToken: userInfo.refreshToken }).then(res => {
        Local.remove('userInfo')
        router.go(0)
    })
}


const navigaionClick = (item:string[]) =>{
    navConfig.dataFill(item)
    navConfig.removeMenu()
    navConfig.setClickGrade(1);
    router.push({name:'/product'})
}


//配置文件
const configSite = () => {
    webSiteConfig().then((res) => {
        if (res.code === 1) {
            siteConf.dataFill(res.data.list)
        }
    });
}

//获取导航栏数据
const navigaionList = ref([]); //导航栏数据
const navList = () => {
    getNavigaion({}).then((res) => {
        if (res.code === 1) {
            navConfig.setHeadNav(res.data.list.all)
            navigaionList.value = res.data.list.all;
        }
    });
}

const logoClick = () =>{
    router.push({name:'/'})
}
onMounted(() => {
    configSite()
    navList()
})

//个人中心
const userInfoClick = (url: string) => {
    router.push({ path: url })
}

defineExpose({ customFun })

</script>

<style></style>